import { fitHeight } from '@/utils/fit';
// import type { PieItemValue } from '../utils';

// 上面空心饼图，饼图中间会显示着重文字；下面是图例。
export const ringPie = {
    series: [
        {
            type: 'pie',
            center: ['50%', '25%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: (...rest: any[]) => {
                        const { name } = rest[0];
                        const value = rest[0].percent;
                        return `{value|${value}%}\n\r{name|${name}}`;
                    },
                    rich: {
                        value: {
                            fontSize: fitHeight(28),
                            color: '#61FFFF',
                            fontWeight: 700,
                            padding: fitHeight(4)
                        },
                        name: {
                            fontSize: fitHeight(16),
                            color: '#FFFFFF'
                        }
                    }
                }
            },
            radius: ['30%', '50%']
        }
    ],
    color: ['#2DA4FF', '#98D2FF', '#6C63F0', '#FF7D1F', '#FF4343'],
    legend: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.85)'
        },
        orient: 'verticle',
        bottom: 0
    },
    tooltip: {
        show: false
    }
};

// 左边为空心饼图，饼图中间会显示着重文字；右边是图例。
export const ringPie2 = {
    series: [
        {
            type: 'pie',
            center: ['25%', '50%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: (...rest: any[]) => {
                        const { name } = rest[0];
                        const value = rest[0].percent;
                        return `{value|${value}%}\n\r{name|${name}}`;
                    },
                    rich: {
                        value: {
                            fontSize: fitHeight(28),
                            color: '#61FFFF',
                            fontWeight: 700,
                            padding: fitHeight(4)
                        },
                        name: {
                            fontSize: fitHeight(16),
                            color: '#FFFFFF'
                        }
                    }
                }
            },
            radius: ['30%', '50%']
        }
    ],
    color: ['#2DA4FF', '#98D2FF', '#6C63F0', '#FF7D1F', '#FF4343'],
    legend: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.85)'
        },
        orient: 'verticle',
        top: 'middle',
        right: 0
        // center
    },
    tooltip: {
        show: false
    }
};

export const ringPie3 = {
    series: [
        {
            type: 'pie',
            roseType: 'area',
            center: ['50%', '57%'],
            label: {
                show: true,
                formatter: '{label|{b}}\n{percent|{d}%}',
                // borderWidth: 20,
                // borderRadius: 4,
                padding: [fitHeight(-30), fitHeight(-50), fitHeight(0), fitHeight(-30)],
                rich: {
                    percent: {
                        color: '#ffffff',
                        fontSize: fitHeight(12)
                    },
                    label: {
                        fontSize: fitHeight(12),
                        color: '#ffffff'
                    }
                }
            },
            labelLine: {
                show: true,
                length: fitHeight(20),
                length2: fitHeight(50),
                lineStyle: {
                    color: '#ffffff'
                }
            },
            // labelLayout: {
            //     x: '0%',
            //     y: '10%',
            //     // dx: fitHeight(20),
            //     // dy: fitHeight(-20)
            // },
            emphasis: {
                label: {
                    show: true
                    // formatter: (...rest: any[]) => {
                    //     const { name } = rest[0];
                    //     const value = rest[0].percent;
                    //     return `{value|${value}%}\n\r{name|${name}}`;
                    // },
                    // rich: {
                    //     value: {
                    //         // fontSize: fitHeight(28),
                    //         color: '#61FFFF',
                    //         fontWeight: 700,
                    //         padding: fitHeight(4)
                    //     },
                    //     name: {
                    //         // fontSize: fitHeight(16),
                    //         color: '#FFFFFF'
                    //     }
                    // }
                }
            },
            radius: ['42%', '70%']
        }
    ],
    color: ['#F17707', '#0090F8', '#0BC360'],
    legend: {
        show: false
    },
    tooltip: {
        show: false
    }
};
